<template>
  <div class="hot">
    <div class="banner" v-if="hotBanner">
      <van-swipe @change="onChange" autoplay="3000">
        <van-swipe-item
          v-for="(item, index) in hotBanner[0].children"
          :key="index"
        >
          <div class="banner_img">
            <img :src="item.model.cover" alt="" />
            <p>{{ item.model.title }}</p>
          </div>
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">
            <span> {{ current + 1 }}</span
            >/{{ hotBannerlength }}
          </div>
        </template>
      </van-swipe>
    </div>
    <div class="bigCartTop" v-if="hotbigCarTop">
      <div class="content" v-for="(item, index) in hotbigCarTop" :key="index">
        <div class="head">
          <!-- useritem?id='+ songitem.user.id -->
          <router-link :to="'/useritem?id='+item.children[0].model.resource.user_id" tag="div" class="left">
             <div class="heads">
              <img
                :src="item.children[0].model.resource.author.userinfo.avatar"
                alt=""
              />
             </div>
           
             <div class="name">
              {{ item.children[0].model.resource.author.userinfo.username }}
             </div>
          </router-link>
          <div
            class="right"
            @click="gz(item.children[0].model.resource.user_id)"
          >
            <div class="gzhu" v-if="!item.children[0].model.resource.is_vr">
              <img src="../assets/img/add.png" alt="" />
              <span>关注</span>
            </div>
            <div
              class="havegzhu"
              v-if="item.children[0].model.resource.is_vr"
            >
              <span>已关注</span>
            </div>
            <div class="share">
              <img src="../assets/img/Zk1.png" alt="" />
            </div>
          </div>
        </div>
        <div class="title">
          <p>{{ item.children[0].model.resource.title }}</p>
        </div>
        <div
          class="cover"
          @click="tohomeitem(item.children[0].model.resource.id)"
        >
          <img :src="item.children[0].model.resource.cover" alt="" />
        </div>
        <div class="looknum">
          <p>
            {{ item.children[0].model.resource.count.count_view | looknum }}观看
            | {{ item.children[0].model.resource.duration | playerTime }}
          </p>
        </div>
        <div class="bar">
          <div
            class="collection"
            @click="addCollect(item.children[0].model.resource.id)"
          >
            <img
              src="../assets/img/28.png"
              alt=""
              v-show="!item.children[0].model.resource.is_private"
            />
            <img
              src="../assets/img/vp.png"
              alt=""
              v-show="item.children[0].model.resource.is_private"
            />
            <span>{{
              item.children[0].model.resource.is_private == false
                ? item.children[0].model.resource.count.count_collect
                : item.children[0].model.resource.count.count_collect + 1
            }}</span>
          </div>
          <div class="comments">
            <img src="../assets/img/Ac1.png" alt="" />
            <span>{{
              item.children[0].model.resource.count.count_comment
            }}</span>
          </div>
          <div
            class="likes"
            @click="addLike(item.children[0].model.resource.id)"
          >
            <img
              src="../assets/img/like.png"
              alt=""
              v-show="!item.children[0].model.resource.vr"
            />
            <img
              src="../assets/img/likes.png"
              alt=""
              v-show="item.children[0].model.resource.vr"
            />
            <span>{{
              item.children[0].model.resource.vr == false
                ? item.children[0].model.resource.count.count_like
                : item.children[0].model.resource.count.count_like + 1
            }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getHot } from "../api/hot";
export default {
  data() {
    return {
      hotlist: null,
      hotBanner: null, //热门轮播图
      current: 1,
      hotBannerlength: null,
      hotbigCarTop: null,
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    tohomeitem(id) {
      console.log(id);
      this.$router.push({ path: "./homeitem", query: { reid: id } });
    },
    getHotFun() {
      getHot().then((data) => {
        this.hotlist = data.data.children;
        // 轮播图数据
        this.hotBanner = this.hotlist.filter((item) => item.type == "uiBanner");
        // 轮播图长度
        this.hotBannerlength = this.hotBanner[0].children.length;
        // 大卡片数据
        this.hotbigCarTop = this.hotlist.filter(
          (item) => item.type == "uiBigCard"
        );
        // console.log(this.hotbigCarTop);
        let tempcollect = JSON.parse(window.localStorage.getItem("iscollect"));
        if (tempcollect != null) {
          this.hotbigCarTop.forEach((item) => {
            tempcollect.forEach((i) => {
              if (
                item.children[0].model.resource.id ==
                i.children[0].model.resource.id
              ) {
                item.children[0].model.resource.is_private =
                  i.children[0].model.resource.is_private;
              }
            });
          });
        }
        let templike = JSON.parse(window.localStorage.getItem("islike"));
        if (templike != null) {
          this.hotbigCarTop.forEach((item) => {
            templike.forEach((i) => {
              if (
                item.children[0].model.resource.id ==
                i.children[0].model.resource.id
              ) {
                item.children[0].model.resource.vr =
                  i.children[0].model.resource.vr;
              }
            });
          });
        }
        let tempgz = JSON.parse(window.localStorage.getItem("isgz"));
        if (tempgz != null) {
          this.hotbigCarTop.forEach((item) => {
            tempgz.forEach((i) => {
              if (
                item.children[0].model.resource.user_id==
                i.children[0].model.resource.user_id
              ) {
                item.children[0].model.resource.is_vr =
                  i.children[0].model.resource.is_vr;
              }
            });
          });
        }
      });
    },
    addCollect(id) {
      let index = this.hotbigCarTop.findIndex(
        (item) => item.children[0].model.resource.id == id
      ); //找下标
      let temp = this.hotbigCarTop[index]; //当前这个作品
      // 改变状态
      temp.children[0].model.resource.is_private =
        !temp.children[0].model.resource.is_private;
      //  console.log(temp.children[0].model.resource.is_private);
      // 如果存储中没有作品
      if (JSON.parse(window.localStorage.getItem("iscollect")) == null) {
        let tempArr = []; // 空数组
        tempArr.push(temp);
        window.localStorage.setItem("iscollect", JSON.stringify(tempArr));
      }
      // 如果存储中有作品
      else {
        // 临时接受的数组
        let receiveTempArr = JSON.parse(
          window.localStorage.getItem("iscollect")
        ); //取出来
        let flag = receiveTempArr.some((item) => {
          //判断存储有没有这个对象
          return item.children[0].model.resource.id == id;
        });
        //没有就添加
        if (!flag) {
          receiveTempArr.push(temp); //对象加入临时数组
          window.localStorage.setItem(
            "iscollect",
            JSON.stringify(receiveTempArr)
          );
        } else {
          let tempchance = JSON.parse(window.localStorage.getItem("iscollect"));
          //  console.log(tempchance);
          tempchance[index].children[0].model.resource.is_private =
            !tempchance[index].children[0].model.resource.is_private;
          window.localStorage.setItem("iscollect", JSON.stringify(tempchance));
        }
      }
    },
    addLike(id) {
      let index = this.hotbigCarTop.findIndex(
        (item) => item.children[0].model.resource.id == id
      ); //找下标
      let temp = this.hotbigCarTop[index]; //当前这个作品
      // 改变状态
      temp.children[0].model.resource.vr = !temp.children[0].model.resource.vr;
      // 如果存储中没有作品
      if (JSON.parse(window.localStorage.getItem("islike")) == null) {
        let tempArr = []; // 空数组
        tempArr.push(temp);
        window.localStorage.setItem("islike", JSON.stringify(tempArr));
      }
      // 如果存储中有作品
      else {
        // 临时接受的数组
        let receiveTempArr = JSON.parse(window.localStorage.getItem("islike")); //取出来
        let flag = receiveTempArr.some((item) => {
          //判断存储有没有这个对象
          return item.children[0].model.resource.id == id;
        });
        //没有就添加
        if (!flag) {
          receiveTempArr.push(temp); //对象加入临时数组
          window.localStorage.setItem("islike", JSON.stringify(receiveTempArr));
        } else {
          let tempchance = JSON.parse(window.localStorage.getItem("islike"));
          //  console.log(tempchance);
          tempchance[index].children[0].model.resource.vr =
            !tempchance[index].children[0].model.resource.vr;
          window.localStorage.setItem("islike", JSON.stringify(tempchance));
        }
      }
    },
    gz(id) {
      let index1 = this.hotbigCarTop.findIndex(item=>item.children[0].model.resource.user_id == id );
      this.hotbigCarTop[index1].children[0].model.resource.is_vr=!this.hotbigCarTop[index1].children[0].model.resource.is_vr 
      let tempgz = JSON.parse(window.localStorage.getItem("isgz"));
      tempgz = tempgz == null ? [] : tempgz;
      if (this.hotbigCarTop[index1].children[0].model.resource.is_vr) {
        tempgz.push(this.hotbigCarTop[index1]);
         window.localStorage.setItem("isgz", JSON.stringify(tempgz))
      }else{
        let index2 = tempgz.findIndex(item=>item.children[0].model.resource.user_id == id)
        tempgz.splice(index2,1)
        window.localStorage.setItem("isgz", JSON.stringify(tempgz))
      }
      // this.getHotFun()
      // if (tempgz.length == 0) {
      //   let index = this.hotbigCarTop.findIndex((item) => item.children[0].model.resource.user_id == id );
      //   this.hotbigCarTop[index].children[0].model.resource.is_vr =!this.hotbigCarTop[index].children[0].model.resource.is_vr;
      //   let temp = this.hotbigCarTop[index];
      //   tempgz.push(temp);
      //   window.localStorage.setItem("isgz", JSON.stringify(tempgz)) } 
      //   else {
      //   let index = tempgz.findIndex((item) => item.children[0].model.resource.user_id == id);
      //   if (index!=-1) {
      //     tempgz[index].children[0].model.resource.is_vr =!tempgz[index].children[0].model.resource.is_vr;
      //     window.localStorage.setItem("isgz", JSON.stringify(tempgz));
      //    } else {
      //      let index = this.hotbigCarTop.findIndex((item) => item.children[0].model.resource.user_id == id);
      //      this.hotbigCarTop[index].children[0].model.resource.is_vr = !this.hotbigCarTop[index].children[0].model.resource.is_vr;
      //      let temp = this.hotbigCarTop[index];
      //      tempgz.push(temp);
      //      window.localStorage.setItem("isgz", JSON.stringify(tempgz));
      //    }
      // }
      // this.getHotFun()
    },
  },
  created() {
    this.getHotFun();
  },
  filters: {
    looknum(value) {
      if (value > 10000) {
        return Number(value / 10000).toFixed(1) + "w";
      }
    },
    playerTime(data) {
      let m = parseInt(data / 60); //分钟
      let s = parseInt(data % 60); //秒

      return (m > 10 ? m : "0" + m) + "'" + (s < 10 ? "0" + s : s) + "''";
    },
  },
};
</script>

<style lang="less">
.hot {
  .banner {
    width: 95%;
    margin: 0 auto;
    margin: 10px;
    .banner_img {
      width: 100%;
      position: relative;
      img {
        width: 100%;
        display: block;
      }
      p {
        position: absolute;
        bottom: 10px;
        left: 8px;
        color: #fff;
        font-size: 14px;
      }
    }
    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      color: #fff;
      span {
        font-size: 20px;
        font-weight: 500;
      }
    }
  }
  .bigCartTop {
    width: 95%;
    margin: 0 auto;
    margin-bottom: 60px;
    margin-top: 10px;
    .content {
      width: 100%;
      margin: 0 auto;
      margin-bottom: 10px;
      overflow: hidden;
      border-radius: 8px;
      background-color: rgb(255, 255, 255);
      position: relative;
      .head {
        width: 100%;
        background-color: #fff;

        display: flex;
        justify-content: space-between;
        padding: 10px 0px;
        border-bottom: 2px solid #f2f2f2;
        .left {
          display: flex;
          align-items: center;
          position: relative;
          .heads {
            width: 30px;
            height: 30px;
            margin-right: 10px;
            margin-left: 10px;
            img {
              border-radius: 50%;
              width: 30px;
              height: 30px;
            }
          }
          .vip {
            position: absolute;
            top: 18px;
            left: 30px;
            img {
              width: 12px;
            }
          }
          .name {
            font-size: 13px;
            font-weight: 600;
          }
        }
        .right {
          display: flex;
          align-items: center;
          .gzhu {
            display: flex;
            align-items: center;
            padding: 1px 12px;
            margin-right: 20px;

            border-radius: 15px;

            img {
              width: 8px;
              height: 8px;
              margin-right: 5px;
            }
            span {
              font-size: 14px;
              color: salmon;
            }
          }
          .havegzhu {
            padding: 1px 12px;
            margin-right: 20px;
            border: 1px solid f2f2f2;
            border-radius: 15px;

            span {
              font-size: 14px;
              color: gray;
            }
          }
          .share {
            margin-right: 10px;
            img {
              width: 15px;
              height: 15px;
            }
          }
        }
      }
      .title {
        padding: 10px 0px;
        padding-left: 10px;
        p {
          font-weight: 600;
          font-size: 14px;
        }
      }
      .cover {
        width: 100%;

        img {
          width: 100%;
          height: 200px;
        }
      }
      .looknum {
        position: absolute;
        bottom: 50px;
        right: 15px;
        z-index: 50;
        p {
          text-align: end;
          color: #dadada;
          font-size: 14px;
        }
      }
      .bar {
        display: flex;
        justify-content: space-around;
        padding: 10px 0px;
        .collection,
        .comments,
        .likes {
          display: flex;
          align-items: center;
          span {
            display: block;
            color: gray;
            font-size: 14px;
          }
          img {
            width: 15px;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>